<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>智能匹配</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/home.css" />
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-nav-cus">
        <a class="aui-pull-left  aui-btn" href="javascript:history.go(-1)">
            <span class="aui-iconfont aui-icon-left aui-iconfontsize"></span>
        </a>
        <div class="aui-title">智能匹配</div>
    </header>
    <div class="container">
        <div class="aui-range home-range">
            <div class="home-range-text">
                <input type="number" class="range-input" value="10000" onfocus="this.value=''" id="demo11" onchange="inputchange(this,'demo1',20000)">
                <div>我要借款(元)</div>
            </div>
            <div class="home-range-input">
                <i class="range-start">0元</i>
                <input type="range" value="10000" max="20000" min="0" class="aui-range-primary" id="demo1" style="background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: 50% 100%;"
                    oninput="rangechange(this,'demo11',20000)">
                <i class="range-end">20000元</i>
            </div>
        </div>
        <div class="aui-range home-range">
            <div class="home-range-text">
                <input type="number" class="range-input" value="50" onfocus="this.value=''" id="demo22" onchange="inputchange(this,'demo2',100)">
                <div>借款期限(天)</div>
            </div>
            <div class="home-range-input">
                <i class="range-start">0天</i>
                <input type="range" value="50" max="100" min="0" class="aui-range-primary" id="demo2" style="background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: 50% 100%;"
                    oninput="rangechange(this,'demo22',100)">
                <i class="range-end">100天</i>
            </div>
        </div>

        <div class="aui-range home-range">
            <div class=" aui-btn home-btn" onclick="location.href='imresult.html'">开始匹配</div>
        </div>

    </div>
</body>


<script type="text/javascript" src="../script/api.js"></script>
<script>
    document.body.addEventListener('touchmove', function (e) {
        // e.preventDefault();
    });

    function rangechange(el, input, size) {
        let dom = document.getElementById(input);
        dom.value = el.value;
        el.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            el.value / size * 100 + "% 100%;"
    }

    function inputchange(el, input, size) {
        let dom = document.getElementById(input);
        dom.value = el.value;
        dom.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            dom.value / size * 100 + "% 100%;"
    }
</script>

</html>